// pages/addCharts/addCharts.js
import * as echarts from '../../components/ec-canvas/echarts.js';
const storageManager = require('../../utils/storage.js');

// 初始化图表的函数
function initChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
    });
    canvas.setChart(chart);
    
    // 默认图表配置
    const option = {
        backgroundColor: 'transparent',
        title: {
            text: '2024年销售趋势图',
            left: 'center',
            textStyle: {
                color: '#00f5ff',
                fontSize: 16,
                fontWeight: 'bold'
            }
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: '#00f5ff',
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月'],
            axisLine: {
                lineStyle: {
                    color: '#00f5ff'
                }
            },
            axisLabel: {
                color: '#fff'
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#00f5ff'
                }
            },
            axisLabel: {
                color: '#fff'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0, 245, 255, 0.2)'
                }
            }
        },
        series: [{
            data: [85, 92, 101, 134, 90, 230],
            type: 'line',
            smooth: true,
            lineStyle: {
                color: '#00f5ff',
                width: 3
            },
            itemStyle: {
                color: '#00f5ff'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 245, 255, 0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba(0, 245, 255, 0.05)'
                    }]
                }
            }
        }]
    };
    
    chart.setOption(option);
    return chart;
}

Page({
    /**
     * 页面的初始数据
     */
    data: {
        // 图表基础信息
        chartId: '',
        chartTitle: '2024年销售趋势图',
        chartSubtitle: '月度销售数据分析',
        
        // 编辑模式（新建或编辑）
        isEdit: false,
        
        // 图表配置 - 使用简单的配置
        ec: {
            onInit: initChart
        },
        
        // 数据管理tab
        currentDataTab: 'table',
        
        // 表格数据
        tableData: {
            headers: ['月份', '销售额(万元)'],
            rows: [
                ['1月', 85],
                ['2月', 92],
                ['3月', 101],
                ['4月', 134],
                ['5月', 90],
                ['6月', 230]
            ]
        },
        
        // JSON数据
        jsonData: ''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        console.log('addCharts onLoad:', options);
        
        // 获取图表ID
        let chartId = options.id || storageManager.generateChartId();
        let isEdit = !!options.id;
        
        this.setData({
            chartId: chartId,
            isEdit: isEdit
        });
        
        // 初始化JSON数据
        this.updateJsonFromTable();
    },

    /**
     * 更新图表（暂时简化）
     */
    updateChart() {
        // 暂时简化，后续可以添加更新逻辑
        console.log('图表更新');
    },

    /**
     * 从表格数据更新JSON
     */
    updateJsonFromTable() {
        const jsonData = JSON.stringify(this.data.tableData, null, 2);
        this.setData({
            jsonData: jsonData
        });
    },

    /**
     * 切换数据管理tab
     */
    onDataTabChange(e) {
        const tab = e.currentTarget.dataset.tab;
        this.setData({
            currentDataTab: tab
        });
        
        if (tab === 'json') {
            this.updateJsonFromTable();
        }
    },

    /**
     * 图表标题输入
     */
    onTitleInput(e) {
        this.setData({
            chartTitle: e.detail.value
        });
    },

    /**
     * 保存图表
     */
    saveChart() {
        if (!this.data.chartTitle.trim()) {
            wx.showToast({
                title: '请输入图表标题',
                icon: 'none'
            });
            return;
        }
        
        const chartData = {
            id: this.data.chartId,
            title: this.data.chartTitle,
            type: 'line',
            icon: '📈',
            tableData: this.data.tableData,
            lastModified: new Date().toLocaleDateString(),
            createdAt: this.data.isEdit ? undefined : new Date().toISOString()
        };
        
        const success = storageManager.saveChart(chartData);
        if (success) {
            wx.showToast({
                title: '保存成功',
                icon: 'success'
            });
            
            setTimeout(() => {
                wx.switchTab({
                    url: '/pages/home/home'
                });
            }, 1500);
        } else {
            wx.showToast({
                title: '保存失败',
                icon: 'error'
            });
        }
    }
})